<template>
  <div class="mdh">页面效果</div>
  <div class="view">
    <oSearch :searchOptions="searchOptions" />
  </div>
  <div class="mdh">特殊字段说明</div>
  <div class="view">
    headerOptions中最重要的属性为：title、columns，其中columns字段通常是数组按钮集合，同表单字段一样，详见【表单组件字段说明】
  </div>
  <CodeView :code="codeColumn" />
  <div class="view">searchOptions中最重要的属性为：</div>
  <CodeView :code="codeProperty" />
  <div class="mdh">搜索详细</div>
  <CodeView :code="code" />
</template>
<script setup lang="tsx">
import { oSearch } from 'oneui'
const codeColumn = `
{
    title: $Lang.user.list.list_1,
    columns: [
        {
            comtype: "button",
            label: $Lang.user.list.list_2,
            onClick: () => addUerPopup(),
            perm: "addUser",
        },
    ]
}
`
const codeProperty = `
// 【可选】搜索字段，同表单字段一样，详见【表单组件字段说明】
columns:[],
// 【可选】显示搜索按钮，默认true
search: true,
// 【可选】显示重置按钮，默认true
reset: true,
// 【可选】显示导出excel按钮，默认false
excel: false,
// 【可选】显示第二个导出按钮，默认false
excelInfo: false,
// 【可选】显示自动刷新按钮，默认false
autoreload: false
`
const code = `
const searchOptions = computed(() => {
  return {
    columns: [
      {
        prop: 'username',
        comtype: 'input',
        placeholder: '请输入用户账号',
        slots: {
          append() {
            return (
              <el-tooltip
                content={'用户账号,批量用英文逗号(,)分割'}
                placement="top"
              >
                <el-icon>
                  <question-filled />
                </el-icon>
              </el-tooltip>
            )
          }
        }
      },
      {
        prop: 'status',
        placeholder: '请输入在线状态',
        comtype: 'select',
        options: [
          { label: 'PC在线', value: 1 },
          { label: 'WAP在线', value: 2 },
          { label: 'APP在线', value: 3 }
        ]
      },
      {
        prop: 'truename',
        placeholder: '请输入真实姓名',
        comtype: 'input'
      },
      {
        prop: 'usergroup',
        placeholder: '请选择用户分组',
        comtype: 'select',
        multiple: true,
        collapseTags: true,
        options: [
          { label: '分组1', value: 1 },
          { label: '分组2', value: 2 },
          { label: '分组3', value: 3 },
          { label: '分组4', value: 4 }
        ]
      },
      {
        prop: 'regtime',
        placeholder: '请输入注册时间',
        comtype: 'datepicker',
        type: 'daterange',
        startPlaceholder: '注册开始日期',
        endPlaceholder: '注册结束日期'
      }
    ]
  }
})
`
const formData = reactive({})
provide('formData', formData)
const eventData = reactive({})
provide('eventData', eventData)
const searchOptions = computed(() => {
  return {
    columns: [
      {
        prop: 'username',
        comtype: 'input',
        placeholder: '请输入用户账号',
        slots: {
          append() {
            return (
              <el-tooltip
                content={'用户账号,批量用英文逗号(,)分割'}
                placement="top"
              >
                <el-icon>
                  <question-filled />
                </el-icon>
              </el-tooltip>
            )
          }
        }
      },
      {
        prop: 'agent',
        placeholder: '请输入直属分组',
        comtype: 'input'
      },
      {
        prop: 'status',
        placeholder: '请输入在线状态',
        comtype: 'select',
        options: [
          { label: 'PC在线', value: 1 },
          { label: 'WAP在线', value: 2 },
          { label: 'APP在线', value: 3 }
        ]
      },
      {
        prop: 'accountstatus',
        placeholder: '请选择账号状态',
        comtype: 'select',
        options: [
          { label: '启用', value: 1 },
          { label: '停用', value: 2 }
        ]
      },
      {
        prop: 'tag',
        placeholder: '请选择用户标记',
        comtype: 'select',
        multiple: true,
        collapseTags: true,
        options: [
          { label: '正常', value: 1 },
          { label: '危险', value: 2 },
          { label: '致命', value: 3 },
          { label: '测试', value: 4 }
        ]
      },
      {
        prop: 'truename',
        placeholder: '请输入真实姓名',
        comtype: 'input'
      },
      {
        prop: 'usergroup',
        placeholder: '请选择用户分组',
        comtype: 'select',
        multiple: true,
        collapseTags: true,
        options: [
          { label: '分组1', value: 1 },
          { label: '分组2', value: 2 },
          { label: '分组3', value: 3 },
          { label: '分组4', value: 4 }
        ]
      },
      {
        prop: 'bankno',
        placeholder: '请输入身份ID号',
        comtype: 'input'
      },
      {
        prop: 'paytype',
        placeholder: '请选择支付类型',
        comtype: 'select',
        multiple: true,
        collapseTags: true,
        options: [
          { label: '分组1', value: 1 },
          { label: '分组2', value: 2 },
          { label: '分组3', value: 3 },
          { label: '分组4', value: 4 }
        ]
      },
      {
        prop: 'ip',
        placeholder: '请输入登录IP',
        comtype: 'input'
      },
      {
        prop: 'regip',
        placeholder: '请输入注册ip',
        comtype: 'input'
      },
      {
        prop: 'regtime',
        placeholder: '请输入注册时间',
        comtype: 'datepicker',
        type: 'daterange',
        startPlaceholder: '注册开始日期',
        endPlaceholder: '注册结束日期'
      }
    ]
  }
})
</script>
